<template>
	<view class="demsg">
		<view class="msg">
			<view class="imgs">
				<van-image
				  width="100"
				  height="100"
				  radius=20px
				  :src="demsglist.coverImgUrl"/>
				<span>
					<van-icon name="play" class="icplay" size='12px'/>134万
				</span>
			</view>
			
			<view class="rightmsg">
				<p>{{demsglist.name}}</p>
				<span>
					<image src="./images/向下.png" mode="" class="miniimg"></image>
				</span>
				<view class="two">
					<van-image
					  width="25"
					  height="25"
					  round
					  :src="demsglist.creator.avatarUrl"
					/> 
					<span>{{demsglist.creator.nickname}}</span>
					<van-button icon="plus" size="mini">关注</van-button>
				</view>
				<view class="butt">
					<van-button icon="arrow" icon-position='right' size="mini">{{demsglist.creator.expertTags[0]}}</van-button>
					<van-button icon="arrow" icon-position='right' size="mini">{{demsglist.creator.expertTags[1]}}</van-button>
				</view> 
			 </view>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore,
	} from 'vuex'
	import { onLoad } from '@dcloudio/uni-app'
	import { toRefs , defineProps , onMounted , ref ,reactive} from 'vue'
	
	let store = useStore()
	// 获取仓库中的数据 name
	let demsglist = ref('')
	let sss = ref('')
	onMounted(()=>{
		// console.log(store.state.detail.list);
		demsglist.value = store.state.detail.list
	})
</script>

<style lang="scss" scoped>
	.demsg{
		width: 100%;
		height: 140px;
		// background:linear-gradient(rgb(164,123,93),rgb(160,119,89)) ;
		.msg{
			width: 720px;
			height: 90%;
			margin: auto;
			
			display: flex;
			.imgs{
				width: 100px;
				height: 100%;
				border-radius: 15px;
				position: relative;
				margin:10px 13px;
				>span{
					color: white;
					font-size: 12px;
					position: absolute;
					top: 7px;
					left: 45px;
					.icplay{
						color: white;
					}
				}
			}
			.rightmsg{
				width: 600px;
				height: 100%;
				margin:10px 13px;
				>p{
					color: white;
				}
				>span{
					width: 20px;
					height: 25px;
					.miniimg{
						width: 20px;
						height: 20px;
						float: right;
						margin-top: -20px;
					}
				}
				.two{
					width: 100%;
					height: 40px;
					margin-top: 10px;
					position: relative;
					// border: 1px solid black;
					display: flex;
					.van-image{
						padding-top: 10px;
					}
					>span{
						font-size: 12px;
						color: rgb(202,177,159);
						padding-left: 10px;
						// padding-top: -10px;
						line-height: 40px;
					}
					.van-button{
						// height: 25px;
						border-radius: 20px;
						margin: 6px 10px;
						background:rgb(161,125,96) ;
						color:rgb(238,227,219);
					}
				}
				.butt{
					.van-button{
						margin-top: 7px;
						background:rgb(161,125,96) ;
						color:rgb(238,227,219);
						margin-right: 10px;
					}
				}
			}
		}
	}
</style>